<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/coverflow.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>
	<style type="text/css">
		.wrapper {
			position: absolute;
			width: 100%;
			top: 0;
			bottom: 0;
		}
	</style>

	<body onload="loaded()">
		<div class="wrapper" id="wrapper">
			<div class="scroller" id="scroller">
				<div class="m-index">
					<div class="mui-slider slider">
						<div class="mui-slider-group mui-slider-loop slider-group">
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#"><img src="../images/banner-2.png"></a>
							</div>
							<div class="mui-slider-item">
								<a href="#"><img src="../images/banner-1.png"></a>
							</div>
							<div class="mui-slider-item">
								<a href="#"><img src="../images/banner-2.png"></a>
							</div>
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#"><img src="../images/banner-1.png"></a>
							</div>
						</div>
						<div class="mui-slider-indicator slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>
					<div class="index-tabs">
						<a href="javascript:;" class="tab">
							<img src="../images/index-icon-1.png">
							<span>我要借款</span>
						</a>
						<a href="javascript:;" class="tab">
							<img src="../images/index-icon-2.png">
							<span>信息披露</span>
						</a>
						<a href="javascript:;" class="tab">
							<img src="../images/index-icon-3.png">
							<span>安全保障</span>
						</a>
						<a href="javascript:;" class="tab">
							<img src="../images/index-icon-4.png">
							<span>签到</span>
						</a>
					</div>
					<div class="index-recommend swiper-container">
						<div class="m-recommend swiper-wrapper" id="m-recommend"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript" src="../js/laytpl.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/iscroll.js"></script>
		<script type="text/javascript" src="../js/scroller.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/html" id="homeCredit">
			{{# for(var i = 0, len = d.length; i
			< len; i++){ }} <div class="recommend swiper-slide" data-id="{{ d[i].id }}">
				{{# if(i == 0 || i == 3){ }}
				<i class="bd bd-1"></i> {{# }else if(i == 1 || i == 4){ }}
				<i class="bd"></i> {{# }else{ }}
				<i class="bd bd-2"></i> {{# } }}
				<h3>{{ d[i].name }}</h3>
				<div class="rate">
					<p class="percent">{{ d[i].rate }}%</p>
					<p>预期年化收益</p>
				</div>
				<div class="info">
					<span class="f-fl">{{ d[i].dead_line }}{{ d[i].date_type }}</span>
					<span class="f-fr">进度{{ d[i].percent }}%</span>
					<span class="center">剩余{{ d[i].surplus_amount }}{{ d[i].surplus_unit }}</span>
				</div>
				<a href="javascript:;" class="btn bid-btn" data-id="{{d[i].id}}">
					<span class="text">立即投资</span>
					<span class="number">已加入{{ d[i].bid_count }}人</span>
				</a>
				</div>
				{{# } }}
		</script>

		<script type="text/javascript">
			mui.plusReady(function() {
				var index = {
					init: function() {
						this.homeCredit();
					},
					homeCredit: function() {
						mui.ajax(base + 'credit/list', {
							type: 'get',
							dataType: 'json',
							headers: sign(md5),
							success: function(data) {
								var list = data.list;
								var gettpl = document.getElementById('homeCredit').innerHTML;
								laytpl(gettpl).render(list, function(html) {
									document.getElementById('m-recommend').innerHTML = html;
								});
								var swiper = new Swiper('.index-recommend', {
									effect: 'coverflow',
									grabCursor: true,
									centeredSlides: true,
									slidesPerView: 'auto',
									initialSlide: 1,
									coverflow: {
										rotate: 50,
										stretch: 0,
										depth: 100,
										modifier: 1,
										slideShadows: false
									}
								});

								//跳转事件绑定
								$('.bid-btn').on('tap', function() {
									var data_id = $(this).attr('data-id');
									mui.openWindow({
										url: 'project.html',
										extras: {
											credit: data_id
										},
										show: {
											aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
											event: "loaded"
										}
									});
								});
							},
							error: function(data) {
								console.error('error');
							}
						});
					}
				}

				index.init();

				$('.index-tabs .tab:nth-child(1)').on('tap', function() {
					mui.openWindow({
						url: 'loan.html',
						show: {
							aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							event: "loaded"
						}
					});
				});

				$('.index-tabs .tab:nth-child(2)').on('tap', function() {
					mui.openWindow({
						url: 'discovery/info.html',
						show: {
							aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							event: "loaded"
						}
					});
				});

				$('.index-tabs .tab:nth-child(3)').on('tap', function() {
					mui.openWindow({
						url: 'guarantee.html',
						show: {
							aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							event: "loaded"
						}
					});
				});

				$('.index-tabs .tab:nth-child(4)').on('tap', function() {
					mui.toast('签到成功！');
//					mui.openWindow({
//						url: 'discovery/help.html',
//						show: {
//							aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
//							event: "loaded"
//						}
//					});
				});
				
//				$('.mui-slider-item a').on('tap',function(){
//					mui.openWindow({
//						url: 'guarantee.html',
//						show: {
//							aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
//							event: "loaded"
//						}
//					});
//				});
			});
		</script>
	</body>

</html>